<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能迭代</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.png') }}" type="image/png">
    <!-- 在head标签内添加 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="nav-container">
            <div class="logo">智能迭代</div>
            <nav>
                <ul>
                    <li><a href="#">最新消息</a></li>
                    <li><a href="{{ url_for('about') }}">关于我们</a></li>
                    <!-- 未登录时显示 -->
                    <li id="auth-links" style="display: none;">
+                       <a href="{{ url_for('auth') }}">登录</a>
+                       <a href="{{ url_for('auth') }}">注册</a>
                    </li>
                    <!-- 登录后显示 -->
                    <li id="user-info" style="display: none;">
                        <div class="user-avatar-container">
                            <img id="user-avatar" src="{{ url_for('static', filename='images/default_avatar.png') }}" alt="用户头像" class="user-avatar">
                            <span id="username-display"></span>
                            <div class="user-dropdown">
                                <a href="#" onclick="uploadAvatar(); return false;">修改头像</a>
                                <a href="{{ url_for('logout') }}">退出登录</a>
                            </div>
                        </div>
                    </li>
                    <li class="search-item">
                        <input type="text" placeholder="搜索..." class="search-input">
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 登录/注册弹窗 -->
    <div id="authModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" onclick="closeAuthModal()">&times;</span>
            <div class="auth-tabs">
                <button id="login-tab" class="auth-tab active" type="button" onclick="switchAuthTab('login')">登录</button>
                <button id="register-tab" class="auth-tab" type="button" onclick="switchAuthTab('register')">注册</button>
            </div>
            <div id="auth-messages"></div>
            <form id="login-form" method="post" action="/auth" style="display:none;">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" required autocomplete="username">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required autocomplete="current-password">
                </div>
                <button type="submit" class="btn">登录</button>
                <p style="margin-top:12px;">还没有账号？<a href="#" onclick="switchAuthTab('register');return false;">注册</a></p>
            </form>
            <form id="register-form" method="post" action="/auth" style="display:none;">
                <div class="form-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" name="username" required autocomplete="username">
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" name="password" required autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label for="confirm_password">确认密码</label>
                    <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password">
                </div>
                <button type="submit" class="btn">注册</button>
                <p style="margin-top:12px;">已有账号？<a href="#" onclick="switchAuthTab('login');return false;">登录</a></p>
            </form>
        </div>
    </div>

    <!-- 头像上传弹窗 -->
    <div id="avatarModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" onclick="closeAvatarModal()">&times;</span>
            <h3>修改头像</h3>
            <form id="avatar-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="avatar-file">选择头像文件</label>
                    <input type="file" id="avatar-file" name="avatar" accept="image/*" required>
                </div>
                <button type="submit" class="btn">上传头像</button>
            </form>
        </div>
    </div>

    <!-- 主视觉区域 -->
    <section class="hero">
        <div class="hero-content">
            <h1>欢迎来到我们的网站！</h1>
            <h1>我们致力于提供全面高效的解决方案</h1>
            <p>We provide the most efficient and comprehensive solutions</p>
        </div>
    </section>

    <!-- 新增功能卡片区域 -->
    <section class="feature-cards">
        <div class="cards-container">
            <div class="feature-card">
                <div class="card-image">
                    <img src="{{ url_for('static', filename='images/computer.jpg') }}" alt="计数功能">
                </div>
                <div class="card-content">
                    <h3>计数功能</h3>
                    <p>精确统计和管理数据，实时更新结果</p>
                    <a href="{{ url_for('score') }}" class="card-btn">开始使用</a>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="feature-card">
                <div class="card-image">
                    <img src="{{ url_for('static', filename='images/snake.jpg') }}" alt="贪吃蛇游戏">
                </div>
                <div class="card-content">
                    <h3>贪吃蛇游戏</h3>
                    <p>经典贪吃蛇游戏，使用方向键控制移动，空格键暂停</p>
                    <a href="/game/snake_game" class="card-btn">开始游戏</a>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="feature-card">
                <div class="card-image">
                    <img src="{{ url_for('static', filename='images/tetris.jpg') }}" alt="俄罗斯方块">
                </div>
                <div class="card-content">
                    <h3>俄罗斯方块</h3>
                    <p>经典俄罗斯方块游戏，使用方向键控制移动和旋转</p>
                    <a href="/game/tetris_game" class="card-btn">开始游戏</a>
                </div>
            </div>
        </div>
        <div class="cards-container">
            <div class="feature-card">
                <div class="card-image">
                    <img src="{{ url_for('static', filename='images/main.jpg') }}" alt="计数功能">
                </div>
                <div class="card-content">
                    <h3>更多功能,敬请期待</h3>
                    <p>......</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 团队成员区域 -->
    <section class="team-members">
        <div class="members-container">
            <!-- 成员1 -->
            <a href="#" class="member-link">
                <div class="member-card">
                    <div class="member-img">
                        <img src="{{ url_for('static', filename='images/bakery.jpg') }}" alt="团队成员">
                    </div>
                    <div class="member-info">
                        <h3>李昕尧</h3>
                        <p class="bio">团队负责人，负责项目管理与团队协调。</p>
                    </div>
                </div>
            </a>
            <!-- 成员2 -->
            <a href="#" class="member-link">
                <div class="member-card">
                    <div class="member-img">
                        <img src="{{ url_for('static', filename='images/train.jpeg') }}" alt="团队成员">
                    </div>
                    <div class="member-info">
                        <h3>余佳桐</h3>
                        <p class="bio">前端开发，负责用户界面设计与交互实现。</p>
                    </div>
                </div>
            </a>
            <!-- 成员3 -->
            <a href="#" class="member-link">
            <div class="member-card">
                <div class="member-img">
                    <img src="{{ url_for('static', filename='images/wood.jpg') }}" alt="团队成员">
                </div>
                <div class="member-info">
                    <h3>卞跃跃</h3>
                    <p class="bio">后端开发，负责服务器端逻辑与数据库设计。</p>
                </div>
            </div>
            </a>
            <!-- 成员4 -->
              <a href="#" class="member-link">
            <div class="member-card">
                <div class="member-img">
                    <img src="{{ url_for('static', filename='images/main.jpg') }}" alt="团队成员">
                </div>
                <div class="member-info">
                    <h3>王祖臻</h3>
                    <p class="bio">数据库管理员，负责数据库设计与维护。</p>
                </div>
            </div>
            </a>
        </div>
    </section>
    <!-- 在body结束前添加 -->
    <div id="particles-js"></div>
    <script>
      particlesJS('particles-js', {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#D4AF37"
          },
          "shape": {
            "type": "circle"
          },
          "opacity": {
            "value": 0.5,
            "random": true
          },
          "size": {
            "value": 3,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#D4AF37",
            "opacity": 0.2,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 1,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "line_linked": {
                "opacity": 0.5
              }
            },
            "push": {
              "particles_nb": 4
            }
          }
        },
        "retina_detect": true
      });

      // 页面加载时检查登录状态
      document.addEventListener('DOMContentLoaded', function() {
          checkLoginStatus();
      });

      function checkLoginStatus() {
          fetch('/get_user_info')
              .then(response => response.json())
              .then(data => {
                  if (data.error) {
                      // 未登录，显示登录链接
                      document.getElementById('auth-links').style.display = 'block';
                      document.getElementById('user-info').style.display = 'none';
                  } else {
                      // 已登录，显示用户信息
                      document.getElementById('auth-links').style.display = 'none';
                      document.getElementById('user-info').style.display = 'block';
                      document.getElementById('username-display').textContent = data.username;
                      if (data.avatar) {
                          document.getElementById('user-avatar').src = '/static/avatars/' + data.avatar;
                      }
                  }
              })
              .catch(error => {
                  console.error('Error:', error);
                  // 出错时显示登录链接
                  document.getElementById('auth-links').style.display = 'block';
                  document.getElementById('user-info').style.display = 'none';
              });
      }

      function showAuthModal() {
          document.getElementById('authModal').style.display = 'block';
          switchAuthTab('login');
      }

      function closeAuthModal() {
          document.getElementById('authModal').style.display = 'none';
      }

      function switchAuthTab(tab) {
          if (tab === 'login') {
              document.getElementById('login-tab').classList.add('active');
              document.getElementById('register-tab').classList.remove('active');
              document.getElementById('login-form').style.display = 'block';
              document.getElementById('register-form').style.display = 'none';
          } else {
              document.getElementById('register-tab').classList.add('active');
              document.getElementById('login-tab').classList.remove('active');
              document.getElementById('register-form').style.display = 'block';
              document.getElementById('login-form').style.display = 'none';
          }
      }

      function uploadAvatar() {
          document.getElementById('avatarModal').style.display = 'block';
      }

      function closeAvatarModal() {
          document.getElementById('avatarModal').style.display = 'none';
      }

      // 头像上传处理
      document.getElementById('avatar-form').addEventListener('submit', function(e) {
          e.preventDefault();
          const formData = new FormData();
          const fileInput = document.getElementById('avatar-file');
          formData.append('avatar', fileInput.files[0]);

          fetch('/upload_avatar', {
              method: 'POST',
              body: formData
          })
          .then(response => response.json())
          .then(data => {
              if (data.success) {
                  document.getElementById('user-avatar').src = '/static/avatars/' + data.avatar;
                  closeAvatarModal();
                  alert('头像上传成功！');
              } else {
                  alert('头像上传失败：' + data.error);
              }
          })
          .catch(error => {
              console.error('Error:', error);
              alert('头像上传失败');
          });
      });

      // 点击模态框外部关闭
      window.onclick = function(event) {
          const authModal = document.getElementById('authModal');
          const avatarModal = document.getElementById('avatarModal');
          if (event.target === authModal) {
              closeAuthModal();
          }
          if (event.target === avatarModal) {
              closeAvatarModal();
          }
      }
    </script>
</body>
</html>

